<style scoped>
  .flex-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .flex-form>div {
    min-width: 546px;
    margin-bottom: 16px;
  }

  .flex-form .line {
    height: 20px;
    border-top: 1px solid #cacaca;
    width: 100%;
  }

  .flex-form .title {
    width: 100%;
    padding-left: 18px;
    margin: 0;
  }

  .flex-form .required-icon {
    color: #f56c6c;
    margin-right: 4px;
  }

</style>
<style>
  .finance-class .finance-table .el-form-item {
    margin: 0;
  }

</style>
<template>
  <div class="tab_content">
    <div :class="(readonly?'read-only-form':'') + ' finance-class'">
      <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="230px" class="flex-form">
        <div class="title">人员情况</div>
        <el-table :data="form.dataList" border style="margin: 16px" class="finance-table">
          <el-table-column label="职务" align="center">
            <template slot-scope="scope">
              <span class="required-icon" v-if="scope.$index < 3">*</span>{{ form.dataList[scope.$index].position }}
            </template>
          </el-table-column>
          <el-table-column label="姓名" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'dataList[' + scope.$index + '].fullName'">
                <el-input :disabled="readonly" v-model="form.dataList[scope.$index].fullName"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="邮箱" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'dataList[' + scope.$index + '].email'">
                <el-input :disabled="readonly" v-model="form.dataList[scope.$index].email"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <!--<el-table-column label="任职时间" align="center">-->
          <!--<template slot-scope="scope">-->
          <!--<el-input :disabled="readonly"  v-model="dataList[scope.$index].duration"></el-input>-->
          <!--</template>-->
          <!--</el-table-column>-->
          <!--<el-table-column label="学历" align="center">-->
          <!--<template slot-scope="scope">-->
          <!--<el-input :disabled="readonly"  v-model="dataList[scope.$index].degree"></el-input>-->
          <!--</template>-->
          <!--</el-table-column>-->
          <el-table-column label="联系电话" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'dataList[' + scope.$index + '].contactNum'">
                <el-input :disabled="readonly" v-model="form.dataList[scope.$index].contactNum"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column v-if="isshow" label="职称" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'dataList[' + scope.$index + '].positionSerialNo'">
                <el-input :disabled="readonly" v-model="dataList[scope.$index].positionSerialNo"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
        <div class="line"></div>
        <div class="title" style="margin-bottom: 16px">员工情况</div>
        <el-form-item label="员工总人数：" prop="staffAmount">
          <el-input :disabled="readonly" v-model="form.staffAmount"></el-input>
        </el-form-item>
        <el-form-item label="本科以上人数：" prop="undergraduateAmount">
          <el-input :disabled="readonly" v-model="form.undergraduateAmount"></el-input>
        </el-form-item>
        <el-form-item label="大专以上人数：" prop="colledgeAmount">
          <el-input :disabled="readonly" v-model="form.colledgeAmount"></el-input>
        </el-form-item>
        <el-form-item label="管理人员：" prop="managementAmount">
          <el-input :disabled="readonly" v-model="form.managementAmount"></el-input>
        </el-form-item>
        <el-form-item label="工程技术人员：" prop="technicanAmount">
          <el-input :disabled="readonly" v-model="form.technicanAmount"></el-input>
        </el-form-item>
        <el-form-item label="质量人员：" prop="qualiticanAmont">
          <el-input :disabled="readonly" v-model="form.qualiticanAmont"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        isshow: false,
        form: {
          staffAmount: '',
          undergraduateAmount: '',
          colledgeAmount: '',
          managementAmount: '',
          technicanAmount: '',
          qualiticanAmont: '',
          dataList: [],
        },
        p: ['总经理', '销售负责人', '质量负责人', '技术负责人', '采购负责人', '生产负责人'],
        rules: {
          //          fullName: [{required: true, message: '请输入姓名', trigger: 'blur'}],
          //          email: [{required: true, message: '请输入邮箱', trigger: 'blur'}],
          //          contactNum: [{required: true, message: '请输入联系电话', trigger: 'blur'}],
          //          'dataList[0].contactNum': [{required: true, message: '请输入联系电话', trigger: 'blur'}],
          staffAmount: [{
            required: true,
            message: '请输入员工总人数',
            trigger: 'blur'
          }],
          undergraduateAmount: [{
            required: true,
            message: '请输入本科以上人数',
            trigger: 'blur'
          }],
          colledgeAmount: [{
            required: true,
            message: '请输入大专以上人数',
            trigger: 'blur'
          }],
          managementAmount: [{
            required: true,
            message: '请输入管理人员',
            trigger: 'blur'
          }],
          technicanAmount: [{
            required: true,
            message: '请输入工程技术人员',
            trigger: 'blur'
          }],
          qualiticanAmont: [{
            required: true,
            message: '请输入质量人员',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      let p = this.p;
      for (let i = 0; i < 6; i++) {
        this.form.dataList.push({
          position: p[i],
          positionSerialNo: i + 1,
          fullName: '',
          email: '',
          contactNum: ''
        });
        if (i < 3) {
          this.rules['dataList[' + i + '].contactNum'] = [{
            required: true,
            message: '请输入联系电话',
            trigger: 'blur'
          }];
          this.rules['dataList[' + i + '].fullName'] = [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }];
          this.rules['dataList[' + i + '].email'] = [{
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          }];
          this.rules['dataList[' + i + '].positionSerialNo'] = [{
            required: true,
            message: '请输入职称',
            trigger: 'blur'
          }];
        }
      }
    },
    props: {
      readonly: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      initData(data) {
        let self = this;
        for (let key in this.form) {
          if (key !== 'dataList')
            this.form[key] = data[key];
          else {
            this.axios.post(this.lib.config.host.vendorMgt + '/vendormgt/questionary/staff/query/' + data.id).then((res) => {
              console.log(res);
              if (res.data.resultMap.staff instanceof Array && res.data.resultMap.staff.length > 0) {
                self.form.dataList = [];
                res.data.resultMap.staff.forEach((item, index) => {
                  self.form.dataList.push({
                    position: item.position ? item.position : this.p[index],
                    positionSerialNo: item.positionSerialNo,
                    fullName: item.fullName,
                    email: item.email,
                    contactNum: item.contactNum
                  });
                });
              }
            });
          }
        }
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
        });
      },
      getData(isCheck) {
        return new Promise((resolve) => {
          let data = JSON.parse(JSON.stringify(this.form));
          delete data.dataList;
          data['staffJsonStr'] = JSON.stringify(this.form.dataList);
          if (isCheck) {
            this.$refs['form'].validate((valid) => {
              if (valid) {
                resolve({
                  data: data,
                  check: true
                });
              } else {
                resolve({
                  data: data,
                  check: false
                });
              }
            });
          } else {
            resolve({
              data: data,
              check: true
            });
          }
        });
      }
    }
  }

</script>
